<template>
    <div class="projectList-container">
        <ivu-header :option="headerOption"></ivu-header>
        <BackTop></BackTop>

        <div class="projectList-filter">
            <fieldset>
                <legend>查询</legend>
                <Row>
                    <Col span="8">
                        <span class="form-label">*</span> 业务线：
                        <Select
                            v-model="queryData.bizId"
                            clearable
                            style="width: 240px">
                            <Option
                                v-for="item in bizSelectOptions"
                                :value="item.label"
                                :key="item.value">
                                {{ item.label }}
                            </Option>
                        </Select>
                    </Col>
                    <Col span="8">
                        项目名：
                        <Select
                            v-model="queryData.projId"
                            clearable
                            style="width: 240px">
                            <Option
                                v-for="item in projSelectOptions"
                                :value="item.value"
                                :key="item.value">
                                {{ item.label }}
                            </Option>
                        </Select>
                    </Col>
                    <Col span="5">
                        <Button @click="handleQuery">查询</Button>
                        <Button
                            @click="gotoEditProject('')"
                            class="project-add-btn">
                            添加新项目
                        </Button>
                    </Col>
                </Row>
            </fieldset>
        </div>

        <div class="projectList-content" v-if="projList && projList.length">
            <Card
                v-for="item in projList"
                :value="item.projId"
                :key="item.projId"
                @click.native="gotoApiList(item.projId)">
                <p slot="title">{{item.projName}}</p>
                <p slot="extra">
                    <Icon
                        class="project-edit-btn"
                        type="edit"
                        @click.native.stop="gotoEditProject(item.projId)" />
                </p>
                <p class="fecode">{{item.feCode}}</p>
                <p class="becode">{{item.beCode}}</p>
                <p class="bizName">{{item.bizName}}</p>
            </Card>
        </div>
        <div class="projectList-content" v-else>
            <Alert type="warning" show-icon>
                暂无数据，请先添加新项目
            </Alert>
        </div>
    </div>
</template>

<script src="./projectList.js"></script>

<style lang="less" src="./projectList.less" scoped></style>
